<template>
  <div class="udp-monitor">
    <div class="control-panel">

      <div class="input-group">
        <label>udp组播地址:</label>
        <input
            v-model="multicastAddress"
            placeholder="例如: 225.1.1.1"
        />
      </div>
      <div class="input-group">
        <label>udp组播端口:</label>
        <input
            v-model="port"
            type="number"
            placeholder="例如: 8118"
        />
      </div>

      <div class="button-group">
        <button
            @click="saveForm"
            class="start-btn"
        >
          确定
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import {ElMessage} from "element-plus";

const multicastAddress = ref('');
const port = ref('');

const saveForm= async () => {
  // 保存配置到localStorage
  localStorage.setItem('multicastAddress', multicastAddress.value)
  localStorage.setItem('port', port.value)
  
  ElMessage.success('保存成功')
}


// 组件卸载时确保清理资源
onUnmounted(() => {
  
});


onMounted(async () => {
  // 从localStorage读取配置
  multicastAddress.value = localStorage.getItem('multicastAddress')
  port.value = localStorage.getItem('port')
})
</script>

<style scoped>
/* 样式保持不变 */
.udp-monitor {
  padding: 20px;
  max-width: 600px;
}

.control-panel
{
  width: 100%;
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.input-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.button-group {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.button-group button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.start-btn {
  background-color: #4CAF50;
  color: white;
}

.start-btn:disabled {
  background-color: #cccccc;
}

</style>
